<template>
  <div class="model" v-show="$store.state.isOpenLogin">
    <div class="modal_bd" @click="closelogin"></div>
    <div class="showlogin">
      <div class="top">
        <span v-if="!phoneLogin">登录</span>
        <span v-else>手机号登录</span>
        <span @click="closelogin">x</span>
      </div>
      <div v-if="login">
        <div class="center">
          <div class="cen_l"></div>
          <div class="cen_r">
            <div class="title">扫码登录</div>
            <div class="erweima">
              <img src="../assets/images/erweima.png" alt="" />
            </div>
            <p>使用&nbsp;<a href="javascript:;">网易云App</a>&nbsp;扫码登录</p>
          </div>
        </div>
        <div class="footer" @click="login = !login">选择其他登录方式</div>
      </div>
      <div v-else-if="!login && !phoneLogin">
        <div class="centers">
          <div class="cens_l">
            <img src="../assets/images/yun.png" alt="" />
            <div @click="loginWithPhone">手机号登录</div>
            <div>注册</div>
          </div>
          <div class="cens_r">
            <ul>
              <li><i class="icon i1"></i>微信登录</li>
              <li><i class="icon i2"></i>QQ登录</li>
              <li><i class="icon i3"></i>微博登录</li>
              <li><i class="icon i4"></i>网易邮箱账号登录</li>
            </ul>
          </div>
        </div>
        <div class="fot">
          <input type="checkbox" v-model="agree" />同意
          <a href="javascript:;">《服务条款》</a>
          <a href="javascript:;">《隐私政策》</a>
          <a href="javascript:;">《儿童隐私政策》</a>
        </div>
        <img
          @click="login = !login"
          class="half"
          src="../assets/images/halferweima.png"
          alt=""
        />
      </div>
      <!-- 手机号登录-->
      <div class="loginWithPhone" v-else>
        <div class="loginWithPhoneMainer">
          <!-- 请输入手机号 -->
          <div class="phoneWrapper">
            <div class="local">+86</div>
            <input type="text" placeholder="请输入手机号" v-model="phone" />
          </div>
          <!-- 请输入验证码 -->
          <div class="codeWrapper" v-if="!loginWithPassWord">
            <input type="text" placeholder="请输入验证码" v-model="code" />
            <button class="getCodeForPhone" v-if="show" @click="btnyzm">
              获取验证码
            </button>
            <button class="getCodeForPhone" v-else>{{ time }}</button>
          </div>
          <!-- 请输入密码 -->
          <div class="passwordWrapper" v-else>
            <input
              type="password"
              placeholder="请输入密码"
              v-model="password"
            />
          </div>
          <!-- 切换至密码登录 -->
          <div class="changeLoginWay">
            <a v-if="!loginWithPassWord" @click="changeLoginWay">密码登录</a>
            <a v-else @click="changeLoginWay">验证码登录</a>
            <div>
              <input type="checkbox" />
              <span>自动登录</span>
            </div>
          </div>
          <!-- 登录按钮 -->
          <button class="loginButton" ref="loginButton" @click="gologinFn">
            登录
          </button>
        </div>
        <div class="loginWithPhoneFooter">
          <div class="changeLoginWayInPhoneBox pointer" @click="otherLoginn">
            &lt;&nbsp;&nbsp;其他登录方式
          </div>
          <div class="registerText pointer">
            &lt;没有账号?&nbsp;免费注册&nbsp;&nbsp;
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validateTelephone } from "../utils/index";
import { PhoneApi } from "../request/api";
export default {
  data() {
    return {
      // 默认显示扫码
      login: true,
      // 手机登录栏
      phoneLogin: false,
      // 手机号
      phone: "",
      // 密码
      password: "",
      // 验证码
      code: "",
      // 倒计时时间
      time: 10,
      timer: "",
      // true 显示获取验证码 false 显示倒计时
      show: true,
      // 是否勾选同意协议
      agree: false,
      // 密码登录 默认为验证码登录
      loginWithPassWord: false,
    };
  },
  methods: {
    // 关闭登录模态框
    closelogin() {
      this.$store.commit("changeLoginShow", false);
    },
    // 检查是否勾选了协议
    checkAgree() {
      if (this.agree == false) {
        let obj = {
          conent: "请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》",
          icon: "info",
        };
        this.$store.dispatch("closeToast", obj);
        return;
      }
    },
    // 点击手机号登录
    loginWithPhone() {
      if (this.agree == false) {
        let obj = {
          content: "请先勾选同意《服务条款》《隐私政策》《儿童隐私政策》",
          icon: "info",
        };
        this.$store.dispatch("closeToast", obj);
        return;
      }
      this.phoneLogin = true;
    },
    // 切换密码或者验证码登录
    changeLoginWay() {
      this.loginWithPassWord = !this.loginWithPassWord;
    },
    // 点击其他登录方式
    otherLoginn() {
      this.phoneLogin = false;
      this.password = "";
      this.phone = "";
      this.code = "";
      this.agree = false;
    },
    // 点击验证码
    btnyzm() {
      let result = validateTelephone(this.phone);
      if (result) {
        // 手机号正确
        (this.show = false), this.StartTime();
      } else {
        // 手机号错误
        let obj = { content: "请重新输入手机号", icon: "danger" };
        this.$store.dispatch("closeToast", obj);
      }
      this.phone = "";
    },
    StartTime() {
      this.timer = setInterval(() => {
        this.time--;
        if (this.time <= 0) {
          // 清除定时器
          clearInterval(this.timer);
          this.show = true;
          this.time = 10; // 初始化数字
        }
      }, 1000);
    },
    gologinFn() {
      //验证手机号是否正确
      let result = validateTelephone(this.phone);
      if (!result) {
        //检验手机号错误的时候
        let obj = {
          content: "请输入正确到的手机号",
          icon: "danger",
        };
        this.$store.dispatch("closeToast", obj);
        return;
      }
      PhoneApi({
        phone: this.phone,
        password: this.password,
      }).then((res) => {
        console.log(res)
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.model {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  .modal_bd {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .showlogin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 530px;
    height: 372px;
    border-radius: 4px;
    box-shadow: 0 5px 16px rgb(0 0 0);
    background: #fff;
    border: none;
    overflow: hidden;
    user-select: none;
    .top {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #191919;
      border-radius: 4px 4px 0 0;
      background: #2d2d2d;
      height: 39px;
      align-items: center;
      cursor: move;
      cursor: pointer;
      span {
        color: #fff;
        &:nth-child(1) {
          margin-left: 20px;
        }
        &:nth-child(2) {
          margin-right: 20px;
          font-size: 14px;
        }
      }
    }
    .center {
      width: 100%;
      display: flex;
      padding: 38px 0 20px;
      position: relative;
      .cen_l {
        width: 125px;
        height: 220px;
        margin-left: 101px;
        background: url("../assets/images/phone.png");
        /* 图像将调整大小以适合容器 */
        background-size: contain;
      }
      .cen_r {
        margin-left: 25px;
        width: 200px;
        text-align: center;
        .title {
          margin-bottom: 20px;
          font-size: 18px;
          font-weight: 500;
        }
        p {
          font-size: 12px;
          width: 200px;
          height: 17px;
          line-height: 17px;
          color: rgba(0, 0, 0, 0.4);
          margin-top: 15px;
          a {
            color: blue;
          }
        }
      }
    }
    .footer {
      width: 118px;
      height: 28px;
      margin: 10px auto 0;
      font-size: 12px;
      border: 1px solid #979797;
      border-radius: 15px;
      line-height: 28px;
      text-align: center;
      color: rgba(0, 0, 0, 0.8);
      cursor: pointer;
    }
    .centers {
      display: flex;
      align-items: center;
      height: 220px;
      margin-top: 20px;
      position: relative;
      .cens_l {
        width: 224px;
        padding: 0 35px 3px 40px;
        border-right: 1px dotted #ccc;
        div {
          width: 219px;
          height: 31px;
          box-sizing: border-box;
          border-radius: 7px;
          border: 1px solid #ccc;
          text-align: center;
          line-height: 31px;
          margin: 10px auto;
          cursor: pointer;
          &:first-of-type {
            background-color: rgb(74, 148, 217);
            color: #fff;
          }
          &:last-of-type {
            background-color: rgb(244, 244, 244);
            color: #ccc;
          }
        }
      }
      .cens_r {
        padding-left: 40px;
        li {
          margin: 10px 0;
          cursor: pointer;
          i {
            display: inline-block;
            /* 文字和图片是基线对齐 */
            vertical-align: middle;
            width: 38px;
            height: 38px;
            margin-right: 14px;
            background: url("../assets/images/iconfont.png") no-repeat;
            &.i1 {
              background-position: -150px -670px;
            }
            &.i2 {
              background-position: -190px -670px;
            }
            &.i3 {
              background-position: -230px -670px;
            }
            &.i4 {
              background-position: -270px -670px;
            }
          }
        }
      }
    }
    .fot {
      margin-left: 40px;
      margin-top: 30px;
      font-size: 10px;
      display: flex;
      align-items: center;
      a {
        color: blue;
      }
    }
    .half {
      width: 52px;
      height: 52px;
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: pointer;
    }
    .loginWithPhone {
      .loginWithPhoneMainer {
        width: 250px;
        height: 210px;
        padding: 30px 0 43px 0;
        margin: 0 auto;
        .phoneWrapper,
        .codeWrapper,
        .passwordWrapper {
          width: 100%;
          height: 36px;
          margin-bottom: 12px;
          font-size: 12px;
          input {
            font-size: 16px;
            outline: none;
          }
        }
        .phoneWrapper {
          display: flex;
          .local {
            flex-grow: 1;
            border: 1px solid #cdcdcd;
            border-right: none;
            text-align: center;
            line-height: 36px;
            color: #000;
            font-size: 15px;
            border-radius: 5px;
          }
          input {
            border: 1px solid #cdcdcd;
            padding: 5px 0 5px 10px;
            flex-grow: 2;
            border-radius: 5px;
          }
        }
        .codeWrapper {
          display: flex;
          justify-content: space-between;
          input {
            border: 1px solid #cdcdcd;
            padding: 5px 0 5px 10px;
            width: 160px;
            border-radius: 5px;
          }
          .getCodeForPhone {
            width: 80px;
            font-size: 12px;
            border-radius: 5px;
            border: 0;
          }
        }
        .passwordWrapper {
          /* padding: 7px 0 5px 10px; */
          border-radius: 5px;
          border: 1px solid #cdcdcd;
          input {
            border: 1px solid #cdcdcd;
            padding: 5px 0 5px 10px;
            width: 239px;
            height: 25px;
            border-radius: 5px;
          }
        }
        .changeLoginWay {
          display: flex;
          justify-content: space-between;
          padding: 10px 0 10px 0;
          a {
            display: inline-block;
            color: #000;
            &:hover {
              color: #666;
              text-decoration: underline;
              cursor: pointer;
            }
          }
        }
        .loginButton {
          width: 100%;
          height: 33px;
          background: rgb(57, 136, 211);
          margin-top: 5px;
          border-radius: 6px;
          color: #fff;
          border: 0;
          font-size: 14px;
          cursor: pointer;
        }
      }
      .loginWithPhoneFooter {
        height: 48px;
        width: 100%;
        border-top: 1px solid #cdcdcd;
        border-radius: 0 0 4px 4px;
        line-height: 48px;
        background-color: #f7f7f7;
        display: flex;
        justify-content: space-between;
        .pointer {
          cursor: pointer;
        }
        .changeLoginWayInPhoneBox {
          color: blue;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>